<template>
  <div class="slideBar">
    <ul class="slidebox">
      <li class="leftSlide" v-for="(item, index) in list" :key="index">
        <div
          class="slidelist"
          :class="[
            item.name === routerNav && !item.meta.childTitle
              ? 'selectItem'
              : '',
            item.name === routerNav || item.name === openNav  ? 'fatherSlide' : ''
          ]"
          @click="
            changeLink(item)
          "
        >
          <img :src="ImgName[index]" class="logo" />
          <span :class="[item.name === routerNav || item.name === openNav ? 'selctSlideName':'slideName']">{{ item.meta.name }}</span>
          <img
            class="fatherNavLog"
            src="../../../assets/slideBar/right.png"
            alt=""
            v-show="item.meta.childPath && openNavList.indexOf(item.name) === -1"
          />
          <img
            class="fatherNavLog"
            src="../../../assets/slideBar/down.png"
            alt=""
            v-show="item.meta.childPath && openNavList.indexOf(item.name) !== -1"
          />
        </div>
        <ul
          class="children"
          v-show="item.meta.childPath && openNavList.indexOf(item.name) !== -1"
        >
          <li
            v-for="(it, ind) in item.meta.childTitle"
            :key="it"
            class="flex-center"
            :class="[item.children[ind].name === routerNav ? 'selectChild' : '']"
            @click="childLink(item.meta.childPath[ind],item.children[ind])"
          >
            <span class="childname">{{ it }}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    slideList: {
      require: Array
    }
  },
  data () {
    return {
      routerNav: '',
      openNav: '',
      openNavList: []
    }
  },
  computed: {
    list () {
      // console.log(this.slideList)
      return this.slideList
    },
    ImgName () {
      const nameList = []
      // console.log(this.list, 1)
      // // console.log(this.list)
      let src = ''
      if (this.list[0].name === 'Project') {
        src = 'outside'
      } else if (this.list[0].name === 'projectInfoManage') {
        src = 'inner'
      }
      this.list.length &&
        this.list.forEach(item => {
          nameList.push(
            require('../../../assets/slideBar/' +
              src +
              '/' +
              item.name +
              '.png')
          )
        })
      return nameList
    }
  },
  methods: {
    getHistorySlide () { // 重载时获取
      if (this.$route.meta.fatherPath) {
        this.openNav = this.$route.meta.fatherPath
        this.openNavList.push(this.$route.meta.fatherPath)
      }
      this.routerNav = this.$route.meta.nav
    },
    changeLink (item) { // 一级导航点击
      if (item.meta.childPath) { // 有二级导航的点击效果
        if (this.openNavList.indexOf(item.name) !== -1) { // 再次点击已展开的一级导航
          // console.log(item, this.routerNav)
          if (item.children.some(it => it.name === this.routerNav)) { // 该一级导航下的二级导航有高亮直接return
            return
          }
          this.openNavList.splice(this.openNavList.indexOf(item.name), 1)// 无高亮直接关闭当前一级导航
          return
        }
        if (this.openNavList.length > 1) { // 展开的导航有2个时
          if (this.openNav) { // 有 高亮的二级导航
            this.openNavList = this.openNavList.filter(it => it === this.openNav)
          }
          if (!this.openNav) { // 没有高亮的二级导航
            this.openNavList.shift()
          }
        }
        this.openNavList.push(item.name)
        // console.log(item)
        return
      }
      this.openNav = ''
      this.openNavList = []
      this.routerNav = item.children[0].meta.nav
      // 一级导航点击事件
      this.$router.push(item.path).catch(err => {
        return err
      })
    },
    childLink (path, item) { // 二级导航点击事件
      this.routerNav = item.children[0].meta.nav
      this.openNav = item.children[0].meta.fatherPath
      this.$router.push(path).catch(err => {
        return err
      })
    }
  },
  created () {
    this.getHistorySlide()
  }
}
</script>

<style lang="scss" scoped>
.slideBar {
  background-color: #0b2259;
  height: 100%;
  width: 220px;
  ul.slidebox {
    padding-top: 60px;
    .leftSlide {
      cursor: pointer;
      width: 220px;
      // height: 50px;
      background-color: #0b2259;
      .slidelist {
        position: relative;
        height: 50px;
        opacity: 0.75;
      }
      .fatherNavLog {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 5%;
        width: 12px;
        height: 12px;
      }
      .fatherSlide {
        opacity: 1 !important;
        border-left: 4px solid rgba(255, 255, 255, 1);
        .logo {
          left: 24px;
        }
      }
      .logo {
        position: absolute;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }
      .slideName {
        position: absolute;
        left: 64px;
        line-height: 50px;
        font-size: 14px;
        color: #fff;
      }
      .selctSlideName{
        position: absolute;
        left: 60px;
        line-height: 50px;
        font-size: 14px;
        color: #fff;
      }
    }
    .selectItem {
      opacity: 1 !important;
      background: rgba(87, 131, 255, 1);
      border-left: 4px solid rgba(255, 255, 255, 1);
      .logo {
        left: 24px;
      }
      .slideName {
        left: 60px;
      }
      &::after {
        content: "●";
        position: absolute;
        font-size: 6px;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
      }
    }
  }
  ul.children {
    li.selectChild {
      background: rgba(87, 131, 255, 1);
    }
    li {
      height: 50px;
      background: rgba(9, 24, 60, 1);
      .childname {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 20px;
      }
    }
  }
}
</style>
